<template>
    <section class="THEstate-box">
        <app-header ref="header"></app-header>

        <!-- 泰国——4个热门城市和天气轮播 -->
        <div class="banner-swiper-search-box">
            <div class="swiper-container" id="TH-Hot-city-weathe-swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in THHotCityGetWeatherData" :key="index" :style="{background: item.BGImgSrc}">
                        <div class="inside">
                            <article class="weather-box">
                                <h3>{{item.location}}</h3>
                                <aside class="clearfix">
                                    <img :src="`/static/img/weather/${item.condCodeN}.png`" class="weather-icon">
                                    <div>
                                        <p class="temperature">
                                            {{isNull0(item.tmpMin)}} ~ {{isNull0(item.tmpMax)}}℃
                                        </p>
                                        <p class="weather">{{isNull0(item.condTxtN)}}</p>
                                    </div>
                                </aside>
                            </article>
                        </div>
                    </div>
                </div>
                <ul class="swiper-pagination"></ul>
            </div>

            <!--房源搜索框-->
            <div class="container searchBar-box">
                <h1>立即搜索泰国新房</h1>
                <a-row :gutter="48">
                    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <a-input-search v-model="searchKeyword" placeholder="请输入城市名/项目名" @search="onSearch" @change="searchKeywordChange" size="large">
                            <a-button slot="enterButton" type="primary" :disabled="searchBtnDisabled"><i class="iconfont icon-iconfontsousuo1"></i> 搜索</a-button>
                        </a-input-search>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="HelpMeFindHouse">
                        <router-link to="/HelpMeFindHouse">帮我找房</router-link>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="hot-search">
                        <aside>
                            热门搜索：
                            <a-radio-group v-model="hotCityFilterValue" class="hotCityFilter-radio" @change="hotCityFilterValueChange" v-show="!hotCityFilterLoading" buttonStyle="solid">
                                <a-radio-button v-for="item in hotCityItem" :value="item" :key="item.id">{{ item.chineseName }}</a-radio-button>
                            </a-radio-group>
                        </aside>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--中间主体内容-->
        <div class="main-content">
            <div class="container">
                <a-row>
                    <!-- 筛选条件 -->
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="filter-bar-box">
                        <aside>
                            <span>热门城市：</span>
                            <div class="calc-inside">
                                <div class="filter-bar-skeleton">
                                    <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" :loading="hotCityFilterLoading" />
                                </div>
                                <a-radio-group v-model="hotCityFilterValue" class="hotCityFilter-radio" @change="hotCityFilterValueChange" v-show="!hotCityFilterLoading" buttonStyle="solid">
                                    <a-radio-button v-for="item in hotCityItem" :value="item" :key="item.id">{{ item.chineseName }}</a-radio-button>
                                </a-radio-group>
                            </div>
                        </aside>
                        <aside>
                            <span>投资类型：</span>
                            <div class="calc-inside">
                                <div class="filter-bar-skeleton">
                                    <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" :loading="investmentTypeFilterLoading" />
                                </div>
                                <a-radio-group v-model="investmentTypeFilterValue" class="investmentTypeFilter-radio" @change="investmentTypeFilterValueChange" v-show="!investmentTypeFilterLoading" buttonStyle="solid">
                                    <a-radio-button v-for="item in investmentTypeItem" :value="item" :key="item.id">{{ item.title }}</a-radio-button>
                                </a-radio-group>
                            </div>
                        </aside>
                        <aside>
                            <span>项目类型：</span>
                            <div class="calc-inside">
                                <div class="filter-bar-skeleton">
                                    <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" :loading="projectTypeFilterLoading" />
                                </div>
                                <a-radio-group v-model="projectTypeFilterValue" class="projectTypeFilter-radio" @change="projectTypeFilterValueChange" v-show="!projectTypeFilterLoading" buttonStyle="solid">
                                    <a-radio-button v-for="item in projectTypeItem" :value="item" :key="item.id">{{ item.title }}</a-radio-button>
                                </a-radio-group>
                            </div>
                        </aside>
                        <aside>
                            <span>房屋总价(人民币)：</span>
                            <div class="calc-inside houseTotalPriceFilter-calc-inside">
                                <div class="filter-bar-skeleton">
                                    <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" :loading="houseTotalPriceFilterLoading" />
                                </div>
                                <a-radio-group v-model="houseTotalPriceFilterValue" class="houseTotalPriceFilter-radio" @change="houseTotalPriceFilterValueChange" v-show="!houseTotalPriceFilterLoading" buttonStyle="solid">
                                    <a-radio-button v-for="item in houseTotalPriceItem" :value="item" :key="item.id">{{ item.title }}</a-radio-button>
                                </a-radio-group>
                            </div>
                        </aside>
                        <article class="filterOptions-box clearfix">
                            <span>筛选条件：</span>
                            <p>
                                <span v-show="hotCityFilterTitle" @click="hotCityFilterDelete"><i class="iconfont icon-guanbi"></i>{{ hotCityFilterTitle }}</span>
                                <span v-show="investmentTypeFilterTitle" @click="investmentTypeFilterDelete"><i class="iconfont icon-guanbi"></i>{{ investmentTypeFilterTitle }}</span>
                                <span v-show="projectTypeFilterTitle" @click="projectTypeFilterDelete"><i class="iconfont icon-guanbi"></i>{{ projectTypeFilterTitle }}</span>
                                <span v-show="houseTotalPriceFilterTitle" @click="houseTotalPriceFilterDelete"><i class="iconfont icon-guanbi"></i>{{ houseTotalPriceFilterTitle }}</span>
                            </p>
                            <a-button class="btn-warning right" @click="resetFilterOptions"><i class="iconfont icon-zhongzhi"></i> 重置搜索筛选条件</a-button>
                        </article>
                    </a-col>
                    <!-- 全泰国地图静态展示 -->
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <THStaticMap></THStaticMap>
                    </a-col>
                    <!-- 排序 -->
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="sort-bar-box clearfix" id="sort-bar-box" ref="sortBarBox">
                        <aside>
                            <a @click="defaultSortClick" :class="{'active': defaultSortActive, 'unActive': !defaultSortActive}">默认排序</a>
                            <a @click="priceSortClick" :class="{'active': priceSortActive, 'unActive': !priceSortActive}">总价 <i :class="{'iconfont icon-daoxu': priceSortActiveIconFont, 'iconfont icon-zhengxu': !priceSortActiveIconFont}"></i></a>
                            <a @click="areaSortClick" :class="{'active': areaSortActive, 'unActive': !areaSortActive}">面积 <i :class="{'iconfont icon-daoxu': areaSortActiveIconFont, 'iconfont icon-zhengxu': !areaSortActiveIconFont}"></i></a>
                        </aside>
                        <a class="my-collection-house" @click="goMyCollection"><i class="iconfont icon-xin1"></i> 我的收藏</a>
                    </a-col>
                    <!-- 新房列表 -->
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="Estate-house-list" v-show="!noDataShow">
                        <ul>
                            <li class="clearfix" v-for="(item, index) in EstateListItem" :key="index">
                                <a-card :title="null" hoverable :loading="EstateListLoading">
                                    <a-row :gutter="32">
                                        <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="left-box">
                                            <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">
                                                <img v-lazy="item.photo" :title="item.title" :alt="item.title">
                                            </router-link>
                                        </a-col>
                                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="center-box">
                                            <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}" class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</router-link>
                                            <p>
                                                <span>{{ isNull0(item.type) }}</span> |
                                                <span>{{ isNull0(item.projectType) }}</span> |
                                                <span v-if="item.minArea">面积：{{isNull0(item.minArea)}} {{isMinMaxArea(item.maxArea)}} </span>
                                                <span v-else>面积：{{ isNull0(item.area, 'm²') }}</span>
                                                | <span>{{ isNull0(item.handoverDate) }}</span> |
                                                <span>{{ isNull0(item.housingProperty) }}</span>
                                            </p>
                                            <p><i class="iconfont icon-dingwei1"></i> {{ isNull0(item.address) }}</p>
                                            <p>
                                                <i class="iconfont icon-shujutongji"></i>
                                                <span>近一年房价涨幅<em>{{ isNull0(item.rose, '%') }}</em></span> |
                                                <span>年均租金收益<em>{{ isNull0(item.rent, '%') }}</em></span> |
                                                <span>首付比例<em>{{ isNull0(item.downPayment, '%') }}</em></span>
                                            </p>
                                            <aside>
                                                <i v-for="(itemTags, indexTags) in item.tags.split(',')" :key="indexTags">{{ itemTags }}</i>
                                            </aside>
                                        </a-col>
                                        <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="right-box">
                                            <a-button v-ripple class="btn-danger" id="cencelContrast-button" type="danger" @click="cencelContrast(item.id)" v-show="!isContrast(item.id)"><i class="iconfont icon-cencel"></i> 取消对比</a-button>
                                            <a-button v-ripple type="primary" id="joinContrast-button" @click="joinContrast(item.id)" v-show="isContrast(item.id)"><i class="iconfont icon-tianjia"></i> 加入对比</a-button>
                                            <aside class="collection-house-icon">
                                                <a-tooltip :title="isCollectedHouse(item.id, collectionHouseIdItem).tooltip" placement="left">
                                                    <i :class="collectionHouseIconClass(item.id)" @click.stop.prevent="UNCollectionHouse(item.id)"></i>
                                                </a-tooltip>
                                            </aside>
                                            <p>
                                                <span v-if="item.minPrice && item.maxPrice">{{ isNull0_THB(item.minPrice) }} {{ isMinMaxPrice(item.maxPrice) }}</span>
                                                <span v-else>{{ isNull0_THB(item.price) }}万</span>
                                            </p>
                                            <aside>
                                                <span v-if="item.minPrice && item.maxPrice">{{ isNull0_RMB(item.minPrice, '', isCurrency(item.countryName)) }} {{ isMinMaxRMBPrice(item.maxPrice, isCurrency(item.countryName)) }}</span>
                                                <span v-else>{{ isNull0_RMB(item.price, '万', isCurrency(item.countryName)) }}</span>
                                            </aside>
                                        </a-col>
                                    </a-row>
                                </a-card>
                            </li>
                        </ul>
                        <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;">
                            <a-pagination
                                    :showTotal="total => `共 ${total} 条`"
                                    showQuickJumper
                                    showSizeChanger
                                    :current="pageNumber"
                                    :pageSize="pageSize"
                                    :total="total"
                                    @change="pageNumberChange"
                                    @showSizeChange="pageSizeChange"/>
                        </div>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="noDataShow" class="noData-box">
                        <h5>没有找到您想要的房源！</h5>
                        <img src="/static/img/404_background.png" >
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <!--后台管理单条banner广告图-->
                        <a :href="adData.url" class="activities-banner-admin-img" target="_blank" :title="adData.description" :alt="adData.description">
                            <img :src="adData.photo" :title="adData.description" :alt="adData.description">
                        </a>
                    </a-col>
                </a-row>
            </div>
        </div>
        <!--房源推荐-->
        <recommendHouse></recommendHouse>
        <!--中美置业团队-->
        <consultantTeam></consultantTeam>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="true"></BackTop>

        <p v-show="false">{{getHouseContrast}}</p>
    </section>
</template>

<script>
    import Header from '../../../../components/header.vue';//公共组件——头部
    import recommendHouse from '../../../../components/recommendHouse.vue';//公共组件——房源推荐
    import consultantTeam from '../../../../components/consultantTeam.vue';//公共组件——中美置业团队
    import THStaticMap from './THStaticMap.vue';//全泰国地图静态展示
    import BackTop from '../../../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                mySwiper: null,//主题房源轮播swiper配置

                weatherid:['TH1609350', 'TH1614295', 'TH1151254', 'TH11722003'], //泰国——4个热门城市的天气id
                THHotCityGetWeatherData: [],//泰国——4个热门城市的天气数据
                BangkokWeatherData:{},      //曼谷的天气
                PattayaWeatherData:{},      //芭提雅的天气
                PhuketIslandWeatherData:{}, //普吉岛的天气
                ChiangmaiWeatherData:{},    //清迈的天气

                hotCityItem: [], // 泰国4个热门城市数据
                hotCityFilterLoading: true, //泰国4个热门城市筛选——骨架屏加载loading

                investmentTypeItem: [],//投资类型数据
                investmentTypeFilterLoading: true, //投资类型筛选——骨架屏加载loading

                projectTypeItem: [],//项目类型数据
                projectTypeFilterLoading: true, //项目类型筛选——骨架屏加载loading

                houseTotalPriceItem: [], // 房屋总价数据
                houseTotalPriceFilterLoading: true, //房屋总价筛选——骨架屏加载loading

                // EstateListItem: [],//新房列表数据
                // filed: 'sort', //排序字段，默认按创建时间
                // direction: 'asc',  //排序方向——ASC 升序，DESC 降序
                // searchKeyword: '',  //搜索框关键字
                // cityId: [],//筛选多选：热门城市Id
                // investmentTypeId: [],//筛选多选：投资类型id
                // projectTypeId: [],//筛选多选：项目类型id
                // houseTotalPriceId: [],//筛选多选：房屋总价id
                // pageNumber: 1,  //默认显示第一页
                // pageSize: 10,  //默认固定20条
                // total: 0,    //总条数
                // EstateListLoading: true,//列表加载loading
                // noDataShow: false,//判断是否有搜索结果，没结果则展示提示图片
                //
                // hotCityFilterValue: [],//筛选多选——泰国4个热门城市
                // investmentTypeFilterValue: [],//筛选多选——投资类型
                // projectTypeFilterValue: [],//筛选多选——项目类型
                // houseTotalPriceFilterValue: [],//筛选多选——房屋总价
                //
                // hotCityFilterTitle: [],//筛选多选的名称——泰国4个热门城市
                // investmentTypeFilterTitle: [],//筛选多选的名称——投资类型
                // projectTypeFilterTitle: [],//筛选多选的名称——项目类型
                // houseTotalPriceFilterTitle: [],//筛选多选的名称——房屋总价
                // filterOptions: '',//筛选条件汇总

                EstateListItem: [],//新房列表数据
                filed: 'sort', //排序字段，默认按创建时间
                direction: 'asc',  //排序方向——ASC 升序，DESC 降序
                searchKeyword: '',  //搜索框关键字
                searchBtnDisabled: true,  //搜索框按钮的状态
                cityId: '',//筛选多选：热门城市Id
                investmentTypeId: '',//筛选多选：投资类型id
                projectTypeId: '',//筛选多选：项目类型id
                houseTotalPriceId: '',//筛选多选：房屋总价id
                pageNumber: 1,  //默认显示第一页
                pageSize: 10,  //默认固定20条
                total: 0,    //总条数
                EstateListLoading: true,//列表加载loading
                noDataShow: false,//判断是否有搜索结果，没结果则展示提示图片

                hotCityFilterValue: '',//筛选多选——4个热门城市
                investmentTypeFilterValue: '',//筛选多选——投资类型
                projectTypeFilterValue: '',//筛选多选——项目类型
                houseTotalPriceFilterValue: '',//筛选多选——房屋总价

                hotCityFilterTitle: '',//筛选多选的名称——4个热门城市
                investmentTypeFilterTitle: '',//筛选多选的名称——投资类型
                projectTypeFilterTitle: '',//筛选多选的名称——项目类型
                houseTotalPriceFilterTitle: '',//筛选多选的名称——房屋总价

                defaultSortActive: true,    //排序：默认排序点击切换class的active状态
                priceSortActive: false, //排序：价格排序点击切换class的active状态
                areaSortActive: false, //排序：面积排序点击切换class的active状态
                priceSortActiveIconFont: true, //排序：价格排序点击切换class的active状态的iconfont图标
                areaSortActiveIconFont: true, //排序：面积排序点击切换class的active状态的iconfont图标

                collectionHouseIdItem: [],//当前登录用户的已收藏房源列表数据

                adData: {}, //单条banner广告图
                HouseContrastIdArr: [],//记录房源对比的id

            }
        },
        metaInfo () {
            return {
                title: '泰国房源_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '泰国房源_华美优胜美国房地产投资公司' },
                    { vmid: 'description', name: 'description', content: '泰国房源_华美优胜美国房地产投资公司' },

                ],
            }
        },
        computed: {
            //从state获取房源对比栏的数据
            getHouseContrast() {
                if(this.$store.getters.get_HouseContrast){
                    this.HouseContrastIdArr = this.$store.getters.get_HouseContrast;
                }
                // if(localStorage.duibi_houseId){
                //     this.HouseContrastIdArr = localStorage.duibi_houseId.split(',');
                // }
                return this.$store.getters.get_HouseContrast
            },
        },
        created() {
        },
        mounted() {
            this.mySwiper = new Swiper('#TH-Hot-city-weathe-swiper-container', {
                autoplay: {
                    delay: 5000, //自动切换的时间间隔，单位ms
                    stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换
                    disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。默认为true,如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                },
                effect: 'fade', //slide的切换效果：淡入淡出
                spaceBetween: 0, //slide之间的距离（单位px）
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                noSwiping: true, //禁止鼠标拖动
                noSwipingClass: 'swiper-slide',
            });

            // 遍历泰国4个热门城市的天气id数组，并依次请求天气接口获取天气数据
            this.forTHHotCityGetWeatherData();
            //获取泰国4个热门城市数据
            this.getHotCityData();
            // 获取投资类型数据
            this.getInvestmentTypeData();
            //获取项目类型数据
            this.getProjectTypeData();
            //获取房屋总价数据
            this.getHouseTotalPriceData();
            // 获取新房列表数据
            this.getEstateList();
            // 判断用户是否登录，已登录则获取当前登录用户的已收藏房源列表数据
            if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                this.getLoggedUserCollectionHouse();
            }

            //单条banner广告图
            this.singleAdvertisingPhoto(2);

        },
        methods: {
            // 搜索框关键字Change
            searchKeywordChange(e){
                if(this.searchKeyword){
                    this.searchBtnDisabled = false;
                }else{
                    this.searchBtnDisabled = true;
                }
            },
            //触发显示登录框
            cellLogin(){
                this.$refs.header.$emit('handleLoginModal');
            },
            // 遍历泰国4个热门城市的天气id数组，并依次请求天气接口获取天气数据
            forTHHotCityGetWeatherData() {
                this.weatherid.forEach((i) => {
                    this.getWeatherData(i);
                })
            },
            // 获取泰国4个热门城市的天气数据
            getWeatherData(weatherId) {
                this.$get('/weather/detail/'+ weatherId).then(res => {
                    if (res.status === 0) {
                        switch (weatherId){
                            case 'TH1609350':
                                this.BangkokWeatherData = res.data;
                                break;
                            case "TH1614295":
                                this.PattayaWeatherData = res.data;
                                break;
                            case "TH1151254":
                                this.PhuketIslandWeatherData = res.data;
                                break;
                            case "TH11722003":
                                this.ChiangmaiWeatherData = res.data;
                                break;
                        }
                        this.BangkokWeatherData["BGImgSrc"] = 'url(/static/img/Estate-list-Bangkok.jpg) no-repeat center center';
                        this.PattayaWeatherData["BGImgSrc"] = 'url(/static/img/Estate-list-Pattaya.jpg) no-repeat center center';
                        this.PhuketIslandWeatherData["BGImgSrc"] = 'url(/static/img/Estate-list-Phuket-Island.jpg) no-repeat center center';
                        this.ChiangmaiWeatherData["BGImgSrc"] = 'url(/static/img/Estate-list-Chiangmai.jpg) no-repeat center center';

                        //泰国4个热门城市的天气数据
                        this.THHotCityGetWeatherData = [
                            this.BangkokWeatherData,
                            this.PattayaWeatherData,
                            this.PhuketIslandWeatherData,
                            this.ChiangmaiWeatherData
                        ];
                        this.mySwiper.update();
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //获取泰国4个热门城市数据
            getHotCityData() {
                this.$get('/city/list/1/20?countryId=2').then(res => {
                    this.hotCityFilterLoading = false;
                    if (res.status === 0) {
                        this.hotCityItem = res.list;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取投资类型数据
            getInvestmentTypeData() {
                this.$get('/house/investment/type').then(res => {
                    this.investmentTypeFilterLoading = false;
                    if (res.status === 0) {
                        this.investmentTypeItem = res.data;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //获取项目类型数据
            getProjectTypeData() {
                this.$get('/house/project/type').then(res => {
                    this.projectTypeFilterLoading = false;
                    if (res.status === 0) {
                        this.projectTypeItem = res.data;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //获取房屋总价数据
            getHouseTotalPriceData() {
                this.$get('/house/price/section').then(res => {
                    this.houseTotalPriceFilterLoading = false;
                    if (res.status === 0) {
                        this.houseTotalPriceItem = res.data;
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                this.pageNumber = page;
                this.EstateListLoading = true;
                this.getEstateList();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                this.pageNumber = 1;
                this.pageSize = size;
                this.EstateListLoading = true;
                this.getEstateList();
            },
            // 获取新房列表数据
            getEstateList() {
                this.$get(`/house/search/${this.pageNumber}/${this.pageSize}`, {
                    keyword: this.searchKeyword,//搜索关键字
                    filed: this.filed,//排序字段
                    direction: this.direction,//排序方向——ASC 升序，DESC 降序
                    // cid: this.cityId.join(),//筛选多选——城市Id
                    // iid: this.investmentTypeId.join(),//筛选多选——投资类型Id
                    // hid: this.projectTypeId.join(),//筛选多选——项目类型Id
                    // pid: this.houseTotalPriceId.join(),//筛选多选——房屋总价Id
                    countryId: 2,//国家id：美国1，泰国2，希腊3，日本9
                    cid: this.cityId,//筛选多选——城市Id
                    iid: this.investmentTypeId,//筛选多选——投资类型Id
                    hid: this.projectTypeId,//筛选多选——项目类型Id
                    pid: this.houseTotalPriceId,//筛选多选——房屋总价Id
                }).then(res => {
                    this.EstateListLoading = false;
                    if(res.status == 0){
                        this.EstateListItem = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    }else{
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                });
            },
            //重置选项
            resetFilterOptions() {
                // this.searchKeyword = '';    //搜索关键字
                // this.filed = 'sort';    //排序字段
                // this.direction = 'asc';    //排序方向——ASC 升序，DESC 降序
                // this.cityId = [];    //城市Id
                // this.investmentTypeId = []; //投资类型Id
                // this.projectTypeId = [];    //项目类型Id
                // this.houseTotalPriceId = [];    //房屋总价Id
                // this.hotCityFilterValue = [];   //筛选多选——泰国4个热门城市
                // this.investmentTypeFilterValue = [];   //筛选多选——投资类型
                // this.projectTypeFilterValue = [];   //筛选多选——项目类型
                // this.houseTotalPriceFilterValue = [];   //筛选多选——房屋总价
                // this.hotCityFilterTitle = [];   //筛选多选的名称——泰国4个热门城市
                // this.investmentTypeFilterTitle = [];    //筛选多选的名称——投资类型
                // this.projectTypeFilterTitle = [];       //筛选多选的名称——项目类型
                // this.houseTotalPriceFilterTitle = [];   //筛选多选的名称——房屋总价
                this.pageNumber = 1;
                this.pageSize = 10;
                this.searchKeyword = '';    //搜索关键字
                this.filed = 'sort';    //排序字段
                this.direction = 'asc';    //排序方向——ASC 升序，DESC 降序
                this.cityId = '';    //城市Id
                this.investmentTypeId = ''; //投资类型Id
                this.projectTypeId = '';    //项目类型Id
                this.houseTotalPriceId = '';    //房屋总价Id
                this.hotCityFilterValue = '';   //筛选多选——泰国4个热门城市
                this.investmentTypeFilterValue = '';   //筛选多选——投资类型
                this.projectTypeFilterValue = '';   //筛选多选——项目类型
                this.houseTotalPriceFilterValue = '';   //筛选多选——房屋总价
                this.hotCityFilterTitle = '';   //筛选多选的名称——泰国4个热门城市
                this.investmentTypeFilterTitle = '';    //筛选多选的名称——投资类型
                this.projectTypeFilterTitle = '';       //筛选多选的名称——项目类型
                this.houseTotalPriceFilterTitle = '';   //筛选多选的名称——房屋总价

                this.getEstateList();
            },
            // 获取当前登录用户的已收藏房源列表数据
            getLoggedUserCollectionHouse() {
                this.$get('/collection/houseIds').then(res => {
                    if (res.status == 0) {
                        this.collectionHouseIdItem = res.data;
                        this.$store.commit('set_collectionHouseIdItem', this.collectionHouseIdItem);
                    }else{
                        this.collectionHouseIdItem = [];
                        this.$store.commit('set_collectionHouseIdItem', this.collectionHouseIdItem);
                    }
                });
            },
            //根据当前登录用户的已收藏房源列表数据，判断每个房源的收藏按钮的iconfont类名，没有登录就是默认的收藏iconfont
            collectionHouseIconClass(id){
                return this.isCollectedHouse(id, this.collectionHouseIdItem).class
            },
            //搜索房源：城市、项目名称
            onSearch (value) {
                this.searchKeyword = value;
                this.filed = 'sort';    //排序字段
                this.direction = 'asc';    //排序方向——ASC 升序，DESC 降序
                this.cityId = '';    //城市Id
                this.investmentTypeId = ''; //投资类型Id
                this.projectTypeId = '';    //项目类型Id
                this.houseTotalPriceId = '';    //房屋总价Id
                this.hotCityFilterValue = '';   //筛选多选——泰国4个热门城市
                this.investmentTypeFilterValue = '';   //筛选多选——投资类型
                this.projectTypeFilterValue = '';   //筛选多选——项目类型
                this.houseTotalPriceFilterValue = '';   //筛选多选——房屋总价
                this.hotCityFilterTitle = '';   //筛选多选的名称——泰国4个热门城市
                this.investmentTypeFilterTitle = '';    //筛选多选的名称——投资类型
                this.projectTypeFilterTitle = '';       //筛选多选的名称——项目类型
                this.houseTotalPriceFilterTitle = '';   //筛选多选的名称——房屋总价
                //更新房源列表
                this.EstateListLoading = true;
                this.$get(`/house/search/${this.pageNumber}/${this.pageSize}`, {
                    keyword: this.searchKeyword,//搜索关键字
                    filed: this.filed,//排序字段
                    direction: this.direction,//排序方向——ASC 升序，DESC 降序
                    countryId: 2,//国家id：美国1，泰国2，希腊3，日本9
                    cid: this.cityId,//筛选多选——城市Id
                    iid: this.investmentTypeId,//筛选多选——投资类型Id
                    hid: this.projectTypeId,//筛选多选——项目类型Id
                    pid: this.houseTotalPriceId,//筛选多选——房屋总价Id
                }).then(res => {
                    this.EstateListLoading = false;
                    if(res.status == 0){
                        this.EstateListItem = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    }else{
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }

                    //有搜索条件时隐藏全美地图静态展示
                    this.$store.commit('set_THStaticMapShow', false);

                    this.$nextTick(() => {
                        document.documentElement.scrollTop = 680;
                    })
                });
            },

            //筛选：热门城市多选vlaue值change事件
            hotCityFilterValueChange(e){
                // this.hotCityFilterTitle = [];
                // this.cityId = [];
                // this.hotCityFilterValue.forEach((i) => {
                //     this.hotCityFilterTitle.push(i.chineseName);
                //     this.cityId.push(i.id);
                // });

                let value = e.target.value;
                this.hotCityFilterTitle = value.chineseName;
                this.cityId = value.id;

                // this.searchKeyword = this.hotCityFilterTitle;
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();

                //有筛选条件时隐藏全美地图静态展示
                this.$store.commit('set_THStaticMapShow', false);

            },
            //筛选：投资类型多选vlaue值change事件
            investmentTypeFilterValueChange(e){
                // this.investmentTypeFilterTitle = [];
                // this.investmentTypeId = [];
                // this.investmentTypeFilterValue.forEach((i) => {
                //     this.investmentTypeFilterTitle.push(i.title);
                //     this.investmentTypeId.push(i.id);
                // });

                let value = e.target.value;
                this.investmentTypeFilterTitle = value.title;
                this.investmentTypeId = value.id;

                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
                //有筛选条件时隐藏全美地图静态展示
                this.$store.commit('set_THStaticMapShow', false);
            },
            //筛选：项目类型多选vlaue值change事件
            projectTypeFilterValueChange(e){
                // this.projectTypeFilterTitle = [];
                // this.projectTypeId = [];
                // this.projectTypeFilterValue.forEach((i) => {
                //     this.projectTypeFilterTitle.push(i.title);
                //     this.projectTypeId.push(i.id);
                // });

                let value = e.target.value;
                this.projectTypeFilterTitle = value.title;
                this.projectTypeId = value.id;

                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
                //有筛选条件时隐藏全美地图静态展示
                this.$store.commit('set_THStaticMapShow', false);
            },
            //筛选：房屋总价多选vlaue值change事件
            houseTotalPriceFilterValueChange(e){
                // this.houseTotalPriceFilterTitle = [];
                // this.houseTotalPriceId = [];
                // this.houseTotalPriceFilterValue.forEach((i) => {
                //     this.houseTotalPriceFilterTitle.push(i.title);
                //     this.houseTotalPriceId.push(i.id);
                // });

                let value = e.target.value;
                this.houseTotalPriceFilterTitle = value.title;
                this.houseTotalPriceId = value.id;

                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
                //有筛选条件时隐藏全美地图静态展示
                this.$store.commit('set_THStaticMapShow', false);
            },
            //筛选：热门城市筛选vlaue值delete事件
            hotCityFilterDelete(){
                this.hotCityFilterTitle = '';   //筛选多选的名称——泰国4个热门城市
                this.cityId = '';   //筛选多选——城市Id
                this.hotCityFilterValue = '';   //筛选多选——泰国4个热门城市
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
            },
            //筛选：投资类型筛选vlaue值delete事件
            investmentTypeFilterDelete(){
                this.investmentTypeFilterTitle = '';   //筛选多选的名称——投资类型
                this.investmentTypeId = '';   //筛选多选——投资类型Id
                this.investmentTypeFilterValue = '';   //筛选多选——投资类型
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
            },
            //筛选：项目类型筛选vlaue值delete事件
            projectTypeFilterDelete(){
                this.projectTypeFilterTitle = '';   //筛选多选的名称——项目类型
                this.projectTypeId = '';   //筛选多选——项目类型Id
                this.projectTypeFilterValue = '';   //筛选多选——项目类型
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
            },
            //筛选：房屋总价筛选vlaue值delete事件
            houseTotalPriceFilterDelete(){
                this.houseTotalPriceFilterTitle = '';   //筛选多选的名称——房屋总价
                this.houseTotalPriceId = '';   //筛选多选——房屋总价Id
                this.houseTotalPriceFilterValue = '';   //筛选多选——房屋总价
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
            },

            //排序：默认排序点击切换class
            defaultSortClick () {
                this.defaultSortActive = true;
                this.priceSortActive = false;
                this.areaSortActive = false;
                //默认排序：filed=time，direction=desc
                this.filed = 'sort';
                this.direction = 'asc';
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
            },
            //排序：价格排序点击切换class
            priceSortClick () {
                this.defaultSortActive = false;
                this.areaSortActive = false;
                //当点击到价格排序时，判断正序还是倒序
                if(this.priceSortActive){
                    this.priceSortActiveIconFont = !this.priceSortActiveIconFont;
                }else{
                    this.priceSortActive = !this.priceSortActive;
                }
                //判断价格排序的正序倒序来改变filed，direction字段
                this.filed = 'price';
                this.priceSortActiveIconFont ? this.direction = 'desc' : this.direction = 'asc';
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
            },
            //排序：面积排序点击切换class
            areaSortClick () {
                this.defaultSortActive = false;
                this.priceSortActive = false;
                //当点击到面积排序时，判断正序还是倒序
                if(this.areaSortActive){
                    this.areaSortActiveIconFont = !this.areaSortActiveIconFont;
                }else{
                    this.areaSortActive = !this.areaSortActive;
                }
                //判断面积排序的正序倒序来改变filed，direction字段
                this.filed = 'area';
                this.areaSortActiveIconFont ? this.direction = 'desc' : this.direction = 'asc';
                //更新房源列表
                this.pageNumber = 1;
                this.pageSize = 10;
                this.EstateListLoading = true;
                this.getEstateList();
            },

            //收藏/取消房源
            UNCollectionHouse(EstateHouseId){
                // 判断用户是否登录
                if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                    let action = '';
                    if (this.collectionHouseIdItem.includes(EstateHouseId)) {
                        action = 'unsave';
                        this.collectionHouseFN(EstateHouseId, action);
                    }else{
                        action = 'save';
                        this.collectionHouseFN(EstateHouseId, action);
                    }
                }else{
                    //触发公共登录modal框
                    this.$refs.header.$emit('header_handleLoginModal');
                }
            },
            collectionHouseFN(EstateHouseId, action){
                this.$post('/collection/house/'+ EstateHouseId).then(res => {
                    if (res.status == 0) {
                        if (action == 'unsave'){
                            this.$notification['success']({
                                message: '取消收藏房源成功！',
                            });
                        }else{
                            this.$notification['success']({
                                message: '收藏房源成功！',
                            });
                        }

                        //更新当前登录用户的已收藏房源列表数据
                        this.getLoggedUserCollectionHouse();
                        //更新房源列表
                        this.getEstateList();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },

            //加入对比
            joinContrast (id) {
                if(this.HouseContrastIdArr.length >= 3){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已满，您可以删除不需要的栏内房源再继续添加哦！'
                    });
                }else{
                    this.HouseContrastIdArr.push(id);
                    //新房列表页、个人中心-我的收藏房源页使用——房源对比
                    this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);
                }
            },
            //取消对比
            cencelContrast (id) {
                //-----------------------把对应的值从数组删除-----------------------
                Array.prototype.removeByValue = function(val) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) {
                            this.splice(i, 1);
                            break;
                        }
                    }
                };
                this.HouseContrastIdArr.removeByValue(id);
                //新房列表页、个人中心-我的收藏房源页使用——房源对比
                this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);

                if(this.HouseContrastIdArr.length == 0){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已清空！'
                    });
                }
            },
            //判断此房源是否添加到房源对比栏
            isContrast(id) {
                let isShow = false;//false显示取消对比按钮，true显示加入对比按钮
                if (this.HouseContrastIdArr.indexOf(id) != -1) {
                    isShow = false;
                } else {
                    isShow = true;
                }
                return isShow;
            },

            //跳转到个人中心
            goMyCollection () {
                // 判断用户是否登录
                if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                    this.$router.push('/myCollection');
                }else{
                    //触发公共登录modal框
                    this.$refs.header.$emit('header_handleLoginModal');
                }
            },

            //单条banner广告图
            singleAdvertisingPhoto(adType){
                this.$get('/a/'+ adType).then(res => {
                    if (res.status === 0) {
                        this.adData =res.data.list[0];
                    } else {
                        console.log(res.msg);
                    }
                })
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            recommendHouse,//公共组件——房源推荐
            consultantTeam,//公共组件——中美置业团队
            THStaticMap,//全泰国地图静态展示
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .THEstate-box {
            background: #fff;
            /* 泰国4个热门城市的天气轮播和房源搜索框 */
            .banner-swiper-search-box {
                height: 300px;
                position: relative;
                >.swiper-container {
                    height: 100%;
                    > .swiper-wrapper {
                        height: 100%;
                        > .swiper-slide {
                            position: relative;
                            background-size: 100% !important;
                            >.inside{
                                width: 100%;
                                height: 100%;
                                background: rgba(15, 40, 54, 0.3);
                                >article{
                                    width: 150px;
                                    height: 100px;
                                    position: absolute;
                                    bottom: 100px;
                                    right: 100px;
                                    color: #fff;
                                    text-align: center;
                                    >h3{
                                        font-size: 24px;
                                        color: #fff;
                                        font-weight: bold;
                                    }
                                    >aside{
                                        margin: 10px 0 0 0;
                                        >img{
                                            width: 50px;
                                            -webkit-filter: brightness(400%);
                                            -moz-filter: brightness(400%);
                                            -ms-filter: brightness(400%);
                                            -o-filter: brightness(400%);
                                            filter: brightness(400%);
                                            float: left;
                                        }
                                        >div{
                                            display: inline-block;
                                            text-align: right;
                                            >p.temperature{
                                                font-size: 18px;
                                            }
                                            >p.weather{
                                                font-size: 14px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        >#NewJersey-slide{
                            background: url(/static/img/Estate-list-NewJersey.jpg) no-repeat center center;
                        }
                    }
                    .swiper-pagination{
                        text-align: right;
                        padding: 0 120px 0 0;
                        >span {
                            background: #fff;
                            opacity: 1;
                        }
                        >.swiper-pagination-bullet-active{
                            background: #00b8ee;
                        }
                    }
                }
                /*房源搜索框*/
                >.searchBar-box{
                    width: 100%;
                    position: absolute;
                    top: 40%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                    -moz-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    z-index: 6;
                    >h1{
                        color: #fff;
                        margin: 0 0 20px 0;
                        font-weight: bold;
                    }
                    > .ant-row {
                        >.HelpMeFindHouse {
                            > a {
                                display: block;
                                margin: 0 0 0 30px;
                                font-weight: bold;
                                font-size: 16px;
                                color: #00b8ee;
                                line-height: 40px;
                            }
                            > a:hover {
                                color: #41aaee;
                            }
                        }
                        >.hot-search {
                            >aside {
                                margin: 10px 0 0 0;
                                font-size: 15px;
                                line-height: 32px;
                                color: #fff;
                                display: flex;
                                flex-direction: row;
                                justify-content: left;
                                .ant-radio-group{
                                    display: inline-block;
                                    >label{
                                        border: none;
                                        font-size: 16px;
                                        background: transparent;
                                        color: #fff;
                                        box-shadow: none;
                                        padding: 0 10px;
                                    }
                                    >.is-active{
                                        >span{
                                            color: #1890ff;
                                        }
                                    }
                                    .ant-radio-button-wrapper:first-child{
                                        border: none;
                                    }
                                    .ant-radio-button-wrapper:not(:first-child)::before{
                                        display: none;
                                    }
                                    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
                                        background: #1890ff;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /*中间主体内容*/
            >.main-content{
                margin: 20px 0;
                >.container{
                    >.ant-row {
                        /* 筛选条件 */
                        .filter-bar-box {
                            margin: 0;
                            >aside{
                                margin: 0 0 15px 0;
                                font-size: 15px;
                                line-height: 32px;
                                display: flex;
                                flex-direction: row;
                                justify-content: left;
                                >.calc-inside{
                                    width: calc(~"100% - 75px");
                                    .filter-bar-skeleton{
                                        width: 100%;
                                        .ant-skeleton{
                                            margin: 8px 0 0 0;
                                            .ant-skeleton-content{
                                                vertical-align: middle;
                                            }
                                        }
                                    }
                                    .ant-radio-group{
                                        display: inline-block;
                                        >label{
                                            border: none;
                                            font-size: 16px;
                                        }
                                        .ant-radio-button-wrapper:first-child{
                                            border: none;
                                        }
                                        .ant-radio-button-wrapper:not(:first-child)::before{
                                            display: none;
                                        }
                                    }
                                }
                                >.houseTotalPriceFilter-calc-inside{
                                    width: calc(~"100% - 130px");
                                }
                            }
                            >.filterOptions-box{
                                line-height: 37px;
                                >p{
                                    display: inline-block;
                                    span{
                                        margin: 0 10px;
                                        padding: 5px 20px 5px 5px;
                                        border: 1px solid #606266;
                                        position: relative;
                                        transition: all .3s;
                                        cursor: pointer;
                                        >i{
                                            position: absolute;
                                            right: 0;
                                            transition: all .3s;
                                        }
                                    }
                                    span:hover{
                                        background: #1178e8;
                                        color: #fff;
                                        border-color: #1178e8;
                                    }
                                }
                            }
                        }

                        /* 排序 */
                        .sort-bar-box {
                            border-bottom: 2px solid #41aaee;
                            margin: 40px 0;
                            padding: 4px 0;
                            > aside {
                                display: inline-block;
                                > a {
                                    padding: 8px 15px;
                                    cursor: pointer;
                                }
                                a:hover {
                                    color: #00b8ee;
                                }
                                > a.active {
                                    background: #41aaee;
                                    color: #fff;
                                }
                                > a.unActive {
                                    background: inherit;
                                    color: #666;
                                }

                            }
                            > .my-collection-house {
                                float: right;
                                > i {
                                    color: #f65248;
                                }
                            }
                        }
                        /* 新房列表 */
                        .Estate-house-list {
                            > ul {
                                > li {
                                    padding: 30px 20px;
                                    border-bottom: 1px solid #E6E6E6;
                                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                    .ant-card {
                                        border: none;
                                        > .ant-card-body {
                                            padding: 0;
                                            > .ant-row {
                                                > .left-box {
                                                    > a {
                                                        > img {
                                                            width: 100%;
                                                            height: 200px;
                                                            cursor: pointer;
                                                        }
                                                    }
                                                    text-align: justify;
                                                }
                                                > .center-box {
                                                    > a {
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        color: #38485a;
                                                        margin: 5px 0;
                                                        cursor: pointer;
                                                        -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                        -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                        -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                        -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                    }
                                                    > a:hover {
                                                        color: #00b8ee;
                                                    }
                                                    > p {
                                                        margin: 4px 0;
                                                        > span {
                                                            margin: 0 6px;
                                                            > em {
                                                                font-size: 18px;
                                                                color: #f65248;
                                                            }
                                                        }
                                                        > span:first-of-type {
                                                            margin: 0;
                                                        }
                                                        > i {
                                                            color: #0087e5;
                                                        }
                                                    }
                                                    > aside {
                                                        margin: 30px 0 0 0;
                                                        > i {
                                                            display: inline-block;
                                                            padding: 4px;
                                                            border: 1px solid #ccc;
                                                            margin: 0 4px;
                                                        }
                                                        > i:first-of-type {
                                                            margin: 0;
                                                        }
                                                    }
                                                }
                                                > .right-box {
                                                    text-align: center;
                                                    > button {
                                                        color: #fff;
                                                        margin: 30px 0 10px 0;
                                                    }
                                                    >.collection-house-icon {
                                                        > i{
                                                            display: inline-block;
                                                            font-size: 20px;
                                                            color: #f65248;
                                                            font-weight: bold;
                                                            margin: 0 auto;
                                                            cursor: pointer;
                                                            -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                            -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                            -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                            -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                        }
                                                        > i:hover {
                                                            transform: scale(1.2);
                                                        }
                                                        > i:active {
                                                            transform: scale(1.5, 1.5);
                                                        }
                                                    }
                                                    > p {
                                                        font-size: 20px;
                                                        margin: 8px 0 0 0;
                                                        color: #f65248;
                                                    }
                                                    > aside {

                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .ant-card-hoverable:hover {
                                        box-shadow: none;
                                    }
                                }
                                > li:hover {
                                    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                                    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
                                    -webkit-transform: translate3d(0, 0px, -2px);
                                    transform: translate3d(0, 1px, -2px);
                                }
                            }
                        }
                        /*没有数据*/
                        .noData-box {
                            text-align: center;
                            margin: 120px 0;
                            > h5 {
                                color: #00b8ee;
                            }
                            > img {
                                width: 80%;
                            }
                        }
                        //后台管理单条banner广告图
                        .activities-banner-admin-img {
                            width: 100%;
                            height: 115px;
                            padding: 0;
                            margin: 40px 0;
                            display: block;
                            > img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>